<%--
  Created by IntelliJ IDEA.
  User: benhailong
  Date: 2018/2/7
  Time: 下午3:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加管理员</title>
    <link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all">
    <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script>
    <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script>
    <%--富文本编辑器--%>
    <link rel="stylesheet" href="<%=basePath%>templates/style/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="<%=basePath%>templates/style/kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="<%=basePath%>templates/style/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="<%=basePath%>templates/style/kindeditor/lang/zh-CN.js"></script>
    <script charset="utf-8" src="<%=basePath%>templates/style/kindeditor/plugins/code/prettify.js"></script>
</head>
<body>

<div class="kit-doc">
    <form class="layui-form layui-form" action="">

        <%--广告位ID--%>

        <input type="hidden" value="${kitModel.id}" name="id">

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="layui-badge-dot"></span> &nbsp;广告类型</label>
            <div class="layui-input-block">
                <select name="advTypeId" lay-verify="required" lay-filter="type1" lay-search="" disabled="">
                    <option value="">--请选择--</option>
                    <c:forEach items="${kitList}" var="kitList" >
                        <option value="${kitList.id}" <c:if test="${kitList.id == kitModel.advTypeId}">selected</c:if> >${kitList.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <%--标题--%>
            <div class="layui-form-item" id="title" <c:if test="${advType.titleType==2}">style="display: none"</c:if> <c:if test="${advType.titleType==1}">style="display: block"</c:if> >
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input name="title" lay-verify="" value="${kitModel.title}" placeholder="请输入标题" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        <%--排序--%>
        <div class="layui-form-item" id="no" style="display: block">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input name="no" lay-verify="number" value="${kitModel.alNumber}" placeholder="默认50，越大越靠前" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        <%--副标题--%>
        <div class="layui-form-item" id="subhead" <c:if test="${advType.subheadType==2}">style="display: none"</c:if> <c:if test="${advType.subheadType==1}">style="display: block"</c:if>>
            <label class="layui-form-label">副标题</label>
            <div class="layui-input-block">
                <input name="subhead" lay-verify="" value="${kitModel.subhead}" placeholder="请输入副标题" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        <%--图片--%>
        <div class="layui-form-item" id="imgs" <c:if test="${advType.imgType==2}">style="display: none"</c:if> <c:if test="${advType.imgType==1}">style="display: block"</c:if>>
            <label class="layui-form-label" style="height: 137px; line-height: 117px">图片</label>
            <input name="imgurl" id="imgurl" lay-verify="" value="${kitModel.img}" autocomplete="off" class="layui-input" type="hidden">
            <div class=" layui-upload-drag" id="img" >
                <i class="layui-icon">&#xe654;</i>
                <p>点击上传图片</p>
                <img id="demo1" style="position: absolute;height: 137px;width: 137px;margin: -106px auto auto -70px;" src="<%=basePath%>${kitModel.img}"/>
            </div>
        </div>
        <%--简介--%>
        <div class="layui-form-item" id="explain" <c:if test="${advType.explainType==2}">style="display: none"</c:if> <c:if test="${advType.explainType==1}">style="display: block"</c:if>>
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容"  name="explain" class="layui-textarea">${kitModel.alExplain}</textarea>
            </div>
        </div>
        <%--原价--%>
        <div class="layui-form-item" id="oldPrice" <c:if test="${advType.priceType==2}">style="display: none"</c:if> <c:if test="${advType.priceType==1}">style="display: block"</c:if>>
            <label class="layui-form-label">原价</label>
            <div class="layui-input-block">
                <input name="oldPrice" lay-verify="" value="${kitModel.oldPrice}" placeholder="请输入商品原价" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        <%--现价--%>
        <div class="layui-form-item" id="newPrice" <c:if test="${advType.priceType==2}">style="display: none"</c:if> <c:if test="${advType.priceType==1}">style="display: block"</c:if>>
            <label class="layui-form-label">现价</label>
            <div class="layui-input-block">
                <input name="newPrice" lay-verify="" value="${kitModel.newPrice}" placeholder="请输入折扣价格" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item" id="staticTime" <c:if test="${advType.timeType==2}">style="display: none"</c:if> <c:if test="${advType.timeType==1}">style="display: block"</c:if>>
            <label class="layui-form-label">起止时间</label>
            <div class="layui-input-block">
                <input type="text" name="time" class="layui-input" value="${kitModel.staticTime} - ${kitModel.endTime}" id="time" placeholder=" - ">
            </div>
        </div>
        <div class="layui-form-item" id="informationId" style="display: block">
            <label class="layui-form-label">链接ID</label>
            <div class="layui-input-block">
                <input name="informationId" lay-verify="" value="${kitModel.informationId}" placeholder="请输入链接ID" autocomplete="off" class="layui-input" type="text">

            </div>
        </div>

        <div class="layui-form-item" id="editor" <c:if test="${advType.editorType==2}">style="display: none"</c:if> <c:if test="${advType.editorType==1}">style="display: block"</c:if>>
            <label class="layui-form-label">编辑器</label>
            <div class="layui-input-block">
                <textarea name="content1"  cols="100" rows="8" style="width:700px;height:350px;visibility:hidden;">${kitModel.editor}</textarea>
            </div>
        </div>
        <script>
            KindEditor.ready(function(K) {
                var editor1 = K.create('textarea[name="content1"]', {
                    width:'100%',
                    themeType : 'simple',
                    cssPath : '<%=basePath%>templates/style/kindeditor/plugins/code/prettify.css',
                    uploadJson : '<%=basePath%>apiCommon/upload_json',
                    fileManagerJson : '<%=basePath%>apiCommon/file_manager_json',
                    allowFileManager : true,
                    afterCreate : function() {
                        var self = this;
                        K.ctrl(document, 13, function() {
                            self.sync();
                            document.forms['example'].submit();
                        });
                        K.ctrl(self.edit.doc, 13, function() {
                            self.sync();
                            document.forms['example'].submit();
                        });
                    }
                });
                prettyPrint();
            });
        </script>

        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
        </div>
    </form>
    <!--这里写页面的代码-->
</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'element', 'layer', 'upload'], function(){
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            upload = layui.upload,
            laydate = layui.laydate;

        //日期时间范围
        laydate.render({
            elem: '#time'
            ,type: 'datetime'
            ,range: true
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#img'
            , url: '/apiCommon/setImage'
            , field: 'layuiFile'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result, data) {
                    $('#demo1').css('display','block').attr('src', result); //链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    $('#imgurl').val(res.data.src);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        // 监听下拉框
        form.on('select(type1)', function(data){
            $.ajaxSetup ({
                async: false
            });

            // 获取哪些信息需要显示
            $.post("<%=basePath%>adv_type/getModel", {"id": data.value},function(data){

                // 先把所有的全部都显示
                $("#title").css("display","none");
                $("#no").css("display","block");
                $("#subhead").css("display","none");
                $("#imgs").css("display","none");
                $("#explain").css("display","none");
                $("#oldPrice").css("display","none");
                $("#newPrice").css("display","none");
                $("#staticTime").css("display","none");
                $("#informationId").css("display","none");
                $("#editor").css("display","none");

                if(data.KitModel.titleType == '1'){
                    $("#title").css("display","block");
                }
                if(data.KitModel.explainType == '1'){
                    $("#explain").css("display","block");
                }
                if(data.KitModel.priceType == '1'){
                    $("#oldPrice").css("display","block");
                    $("#newPrice").css("display","block");
                }
                if(data.KitModel.timeType == '1'){
                    $("#staticTime").css("display","block");
                }
                if(data.KitModel.subheadType == '1'){
                    $("#subhead").css("display","block");
                }
                if(data.KitModel.imgType == '1'){
                    $("#imgs").css("display","block");
                }
                if(data.KitModel.editorType == '1'){
                    $("#editor").css("display","block");
                }
                $("#informationId").css("display","block");
            });
        });

        //监听提交，发送请求
        form.on('submit(add)', function(data){
            $.post("<%=basePath%>adv_list/update",data.field,function(data){
                // 获取 session
                if(data.code!=200){
                    layer.alert(data.msg, {offset: 't',icon: 5});
                }
                if(data.code==200){
                    layer.alert(data.msg, {offset: 't',icon: 6});
                }
            });
            return false;
        });

    });
</script>
</body>
</html>
